<template>
    <div>
        <!-- swipe -->
        <mt-swipe :auto="4000">
            <mt-swipe-item v-for="item in bannerList" :key="">1</mt-swipe-item>
        </mt-swipe>
        <!-- 九宫格到六宫格 -->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
                <!-- <span class="mui-icon mui-icon-home"></span> -->
                <img src="../../lib/images/menu1.png" alt="" srcset="">
                <div class="mui-media-body">新闻资讯</div></a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
                <!-- <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span> -->
                <img src="../../lib/images/menu2.png" alt="" srcset="">
                <div class="mui-media-body">图片分享</div></a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
                <!-- <span class="mui-icon mui-icon-chatbubble"></span> -->
                <img src="../../lib/images/menu3.png" alt="" srcset="">
                <div class="mui-media-body">商品购买</div></a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
                <!-- <span class="mui-icon mui-icon-location"></span> -->
                <img src="../../lib/images/menu4.png" alt="" srcset="">
                <div class="mui-media-body">留言反馈</div></a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
                <!-- <span class="mui-icon mui-icon-search"></span> -->
                <img src="../../lib/images/menu5.png" alt="" srcset="">
                <div class="mui-media-body">视频专区</div></a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
                <!-- <span class="mui-icon mui-icon-search"></span> -->
                <img src="../../lib/images/menu6.png" alt="" srcset="">
                <div class="mui-media-body">联系我们</div></a>
            </li>
        </ul>
    </div>
</template>

<script> 
export default {
    props: {

    },
    data() {
        return {
            bannerList:[
                {
                    img:'',
                    url:''
                }
            ]
        };
    },
    computed: {

    },
    created() {
        this.getBanner()
    },
    mounted() {

    },
    watch: {

    },
    methods: {
        getBanner(){
            this.$http.get('http://vue.studyit.io/api/getlunbo').then(res=>{
                if(res.body.status == 0){ // 失败
                
                    Toast({
                        
                    });
                }else{
                    
                };
            })
        }
    },
    components: {

    },
};
</script>

<style lang="scss" scoped>
.mint-swipe {
    height: 200px;
    .mint-swipe-item {
        &:nth-child(1){
            background-color: red;
        }
        &:nth-child(2){
            background-color: green;
        }
        &:nth-child(3){
            background-color: yellow;
        }
        
    }
}
.mui-grid-view.mui-grid-9{
    background-color: white;
    img{
        width: 60px;
        height: 60px;
    }
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
    border: none;
}
</style>
